import { h, isVNode } from 'vue'
import { Flex } from 'ant-design-vue'
import { Attachments } from 'ant-design-x-vue'
import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()

// 角色样式配置
export const roles = {
  ai: {
    placement: 'start',
    variant: 'borderless',
    // typing: { step: 5, interval: 50 },
    loadingRender: () =>
      h('div', { class: 'flex items-center space-x-4 py-3' }, [
        // 波浪动画效果
        h('div', { class: 'flex items-end space-x-1' }, [
          h('div', {
            class: 'w-1 bg-gradient-to-t from-blue-400 to-blue-600 rounded-full',
            style: 'height: 8px; animation: wave 1.2s ease-in-out infinite; animation-delay: 0s;',
          }),
          h('div', {
            class: 'w-1 bg-gradient-to-t from-purple-400 to-purple-600 rounded-full',
            style:
              'height: 12px; animation: wave 1.2s ease-in-out infinite; animation-delay: 0.1s;',
          }),
          h('div', {
            class: 'w-1 bg-gradient-to-t from-pink-400 to-pink-600 rounded-full',
            style:
              'height: 16px; animation: wave 1.2s ease-in-out infinite; animation-delay: 0.2s;',
          }),
          h('div', {
            class: 'w-1 bg-gradient-to-t from-red-400 to-red-600 rounded-full',
            style:
              'height: 12px; animation: wave 1.2s ease-in-out infinite; animation-delay: 0.3s;',
          }),
          h('div', {
            class: 'w-1 bg-gradient-to-t from-orange-400 to-orange-600 rounded-full',
            style: 'height: 8px; animation: wave 1.2s ease-in-out infinite; animation-delay: 0.4s;',
          }),
        ]),
        // 打字机效果文字
        h('div', { class: 'flex items-center space-x-2' }, [
          h(
            'span',
            {
              class: 'text-sm font-medium text-gray-700',
            },
            'AI正在分析',
          ),
          h(
            'span',
            {
              class: 'text-sm font-medium text-blue-600 animate-pulse',
              style: 'animation-duration: 0.8s;',
            },
            '...',
          ),
        ]),
        // 旋转的大脑图标
        h(
          'div',
          {
            class: 'relative',
          },
          [
            h('div', {
              class:
                'w-5 h-5 border-2 border-transparent border-t-blue-500 border-r-purple-500 rounded-full animate-spin',
            }),
            h('div', {
              class:
                'absolute inset-0 w-3 h-3 m-auto bg-gradient-to-r from-blue-400 to-purple-500 rounded-full animate-pulse',
            }),
          ],
        ),
      ]),
    styles: {
      content: {
        borderRadius: '16px',
      },
    },
    // 简单的消息渲染函数：字符串做 Markdown 渲染，非字符串直接返回（组件/VNode）
    messageRender: (content) => {
      if (typeof content !== 'string') {
        return isVNode(content) ? content : h(content)
      }
      return h('div', {
        innerHTML: md.render(content),
        class: 'prose max-w-none',
      })
    },
  },
  local: {
    placement: 'end',
    variant: 'filled',
  },
  file: {
    placement: 'end',
    variant: 'borderless',
    messageRender: (items) =>
      h(Flex, { vertical: true, gap: 'middle' }, () =>
        items.map((item) => h(Attachments.FileCard, { key: item.uid, item: item })),
      ),
  },
}
